<template>
  <div>
    <h1>Welcome to TinyMCE 所见即所得的富文本</h1>
    <tinymce-editor
      ref="editor"
      v-model="msg"
      :disabled="disabled"
      @onClick="onClick"
    >
    </tinymce-editor>
    <button @click="clear">清空内容</button>
    <button @click="disabled = true">禁用</button>
    <div class="editor-content" v-html="msg" />
  </div>
</template>
 
 

<script>
import TinymceEditor from "@/components/Tinymce";
export default {
  components: {
    TinymceEditor,
  },
  data() {
    return {
      msg: `<ol> <li> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器，vue cli 2版本及tinymce 4版本参考：<a style="box-sizing: border-box; text-decoration-line: none; background-color: transparent; transition: color 0.25s ease 0s; position: relative;" href="https://liubing.me/goto/https://blog.csdn.net/liub37/article/details/83310879" target="_blank" rel="nofollow noopener">https://blog.csdn.net/liub37/article/details/83310879</a><br style="box-sizing: border-box;" />做了些小修改，详情见github</p> <blockquote style="box-sizing: border-box; margin: 1em 3em 1em 0px; padding-left: 1em; border-left: 4px solid rgba(0, 0, 0, 0.12); color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; font-size: 16px; background-color: #ffffff;"> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 1rem; line-height: 1.8; overflow-wrap: break-word;">Github:<a style="box-sizing: border-box; text-decoration-line: none; background-color: transparent; transition: color 0.25s ease 0s; position: relative;" title="https://github.com/liub1934/vue-use-tinymce" href="https://liubing.me/goto/https://github.com/liub1934/vue-use-tinymce" target="_blank" rel="nofollow noopener">https://github.com/liub1934/vue-use-tinymce</a></p> </blockquote> <h2 id="header-id-1" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 26px; background-color: #ffffff; margin-top: 18px !important;">插件安装</h2> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">tinymce官方提供了一个vue的组件<a style="box-sizing: border-box; text-decoration-line: none; background-color: transparent; transition: color 0.25s ease 0s; position: relative;" href="https://liubing.me/goto/https://github.com/tinymce/tinymce-vue" target="_blank" rel="nofollow noopener">tinymce-vue</a><br style="box-sizing: border-box;" />如果有注册或购买过服务的话，直接通过组件配置api-key直接使用，像我这种懒的注册或者购买的直接下载tinymce，自力更生</p> <h3 id="header-id-2" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 22px; background-color: #ffffff; margin-top: 18px !important;">安装tinymce-vue</h3> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-shell hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1">npm install @tinymce/tinymce-vue -S</td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-shell hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_45oXMIsEeDOxWPMTNsEA0YzzDYTQUsan" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="A9AWolhYDRkxqCvViSzaQCjmEeDXQMkx" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"></pre> <h3 id="header-id-3" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 22px; background-color: #ffffff; margin-top: 18px !important;">安装tinymce</h3> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-shell hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1">npm install tinymce -S</td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;">
        <code class="language-shell hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_UYSZfjtA0ziUr5TlMY1c8XrMkqD4MWoS" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="Cc3N2kloFc6UJnJGAr5dQV5CCSJt8B0w" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"></pre> <blockquote style="box-sizing: border-box; margin: 1em 3em 1em 0px; padding-left: 1em; border-left: 4px solid rgba(0, 0, 0, 0.12); color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; font-size: 16px; background-color: #ffffff;"> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 1rem; line-height: 1.8; overflow-wrap: break-word;">若无法完成安装，将下面的配置到<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">package.json</code>中执行<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">npm install</code></p> </blockquote> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1"><span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">"@tinymce/tinymce-vue"</span>: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">"^2.0.0"</span>,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"><span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">"tinymce"</span>: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">"^5.0.3"</span></td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_InCJAPhcPfCax3LRQoaoMkgtrZl0igQY" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="mKBKtoTIgBSzQTc0yjX2jEnjjtcIximb" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"></pre> <h3 id="header-id-4" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 22px; background-color: #ffffff; margin-top: 18px !important;">下载中文语言包</h3> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">tinymce提供了很多的语言包，这里我们下载<a style="box-sizing: border-box; text-decoration-line: none; background-color: transparent; transition: color 0.25s ease 0s; position: relative;" href="https://liubing.me/goto/https://www.tiny.cloud/get-tiny/language-packages/" target="_blank" rel="nofollow noopener">中文语言包</a></p> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', 
        -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">&nbsp;</p> <div class="fancybox-wrapper" style="box-sizing: border-box; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; font-size: 16px; background-color: #ffffff;" data-fancybox="post-images"><img class="lazyload lazyload-style-8 lazyload-loaded" style="box-sizing: border-box; vertical-align: middle; border-style: none; max-width: 100%; height: auto; cursor: zoom-in;" src="https://image.liubing.me/2019/12/26/8ab5303abec92.png" alt="image" data-original="https://image.liubing.me/2019/12/26/8ab5303abec92.png" /></div> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">&nbsp;</p> <h2 id="header-id-5" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 26px; background-color: #ffffff; margin-top: 18px !important;">使用</h2> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">1、在<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">public</code>目录下新建<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">tinymce</code>，将上面下载的语言包解压到该目录<br style="box-sizing: border-box;" />2、在<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">node_modules</code>里面找到<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">tinymce</code>,将<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">skins</code>目录复制到<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">public/tinymce</code>里面<br style="box-sizing: border-box;" />最终形成以下目录形式：</p> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">&nbsp;</p> <div class="fancybox-wrapper" style="box-sizing: border-box; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; font-size: 16px; background-color: #ffffff;" data-fancybox="post-images"><img class="lazyload lazyload-style-8 lazyload-loaded" style="box-sizing: border-box; vertical-align: middle; border-style: none; max-width: 100%; height: auto; cursor: zoom-in;" src="https://image.liubing.me/2019/12/26/a5b859754b616.png" alt="image" data-original="https://image.liubing.me/2019/12/26/a5b859754b616.png" /></div> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">&nbsp;</p> <h3 id="header-id-6" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 22px; background-color: #ffffff; margin-top: 18px !important;">初始化</h3> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">引入基本文件</p> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> tinymce <span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">from</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/tinymce'</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> Editor <span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">from</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'@tinymce/tinymce-vue'</span></td> 
        </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="3"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="3">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="3"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/themes/silver'</span></td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_JodA5u0TFO0OUdhhY22tRYJxruYGecec" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="uzsd22c4EaaOe8IaJVHablQzT1tZlRIn" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"></pre> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">components中注册tinymce-vue才能使用</p> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"><code class="language-markup " style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: inherit; padding: 55px 20px 22px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1">&lt;editor id="tinymce" v-model="value" :init="init"&gt;&lt;/editor&gt;</td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"><code class="language-markup " style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: inherit; padding: 55px 20px 22px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_LR9WdyMTGGAl9B3EXpz4XwJMtAx66JNW" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="wyZjU96vFrflqEvOReG60ChkLL0fQ0F8" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"></pre> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">初始化配置项，具体参考<a style="box-sizing: border-box; text-decoration-line: none; background-color: transparent; transition: color 0.25s ease 0s; position: relative;" href="https://liubing.me/goto/https://www.tiny.cloud/docs/" target="_blank" rel="nofollow noopener">官网文档</a>，这里说几个重要的</p> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; 
        border: unset; transition: all 0.3s ease 0s;" data-line-number="1">init: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"> <span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">language_url</span>: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'/tinymce/langs/zh_CN.js'</span>,<span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// 语言包的路径</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="3"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="3">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="3"> <span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">language</span>: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'zh_CN'</span>,<span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">//语言</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="4"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="4">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="4"> <span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">skin_url</span>: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'/tinymce/skins/ui/oxide'</span>,<span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// skin路径</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="5"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="5">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="5"> <span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">height</span>: <span class="hljs-number" style="box-sizing: border-box; color: #b8d7a3;">300</span>,<span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">//编辑器高度</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="6"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="6">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="6"> <span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">branding</span>: <span class="hljs-literal" style="box-sizing: border-box; color: #569cd6;">false</span>,<span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">//是否禁用&ldquo;Powered by TinyMCE&rdquo;</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="7"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="7">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="7"> <span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">menubar</span>: <span class="hljs-literal" style="box-sizing: border-box; color: #569cd6;">false</span>,<span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">//顶部菜单栏显示</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="8"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="8">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="8">}</td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_wHB97SYG6ufVNYNPEKR84xQZOcE3DQvR" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="n2vRk9GbY6MtCtXFwXu6aK1xt2N8jNvO" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"></pre>
        <h2 id="header-id-7" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 26px; background-color: #ffffff; margin-top: 18px !important;">扩展插件</h2> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">默认的编辑器只有基本功能，如果还需要上传图片，插入表格之类的功能就需要添加<a style="box-sizing: border-box; text-decoration-line: none; background-color: transparent; transition: color 0.25s ease 0s; position: relative;" href="https://liubing.me/goto/https://www.tiny.cloud/docs/plugins/" target="_blank" rel="nofollow noopener">插件</a><br style="box-sizing: border-box;" />如添加上传图片和插入表格的插件</p> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/plugins/image'</span><span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// 插入上传图片插件</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/plugins/media'</span><span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// 插入视频插件</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="3"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="3">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="3"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/plugins/table'</span><span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// 插入表格插件</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="4"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="4">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="4"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/plugins/lists'</span><span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// 列表插件</span></td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="5"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="5">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="5"><span class="hljs-keyword" style="box-sizing: border-box; color: #569cd6;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'tinymce/plugins/wordcount'</span><span class="hljs-comment" style="box-sizing: border-box; color: #57a64a; font-style: italic;">// 字数统计插件</span></td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_3pOVtkBalrSJIzpqSXfrr0gHAQnsED46" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="Kb4FsKcz3GbH3aehMTewjowGBbULREMo" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; 
        background-color: #ffffff;"></pre> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">引入后还需要再<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">plugins</code>上配置和<code style="box-sizing: border-box; font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace; font-size: 14px; word-break: break-word; color: #5e6687; background: #f5f7ff; direction: ltr; border-radius: 3px;">toolbar</code>工具栏上添加相应的按钮</p> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1">plugins: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'lists image media table wordcount'</span>,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; display: block;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"><span class="hljs-attr" style="box-sizing: border-box; color: #9cdcfe;">toolbar</span>: <span class="hljs-string" style="box-sizing: border-box; color: #d69d85;">'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'</span></td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"><code class="language-javascript hljs" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: #dcdcdc; display: block; overflow-x: auto; padding: 55px 20px 22px; background-position: initial; background-color: #1e1e1e; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_rpWEDS2tGMMBAgdfbehHV9qVjYymkBO4" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="rzLjmbldj8ETVpq6wIRyItVCIO11DR3v" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;"></pre> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">这里我们一般会再次把它进行封装一下，以便其他地方随时可以引用</p> <h2 id="header-id-8" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 26px; background-color: #ffffff; margin-top: 18px !important;">完整代码tinymce-editor.vue</h2> <blockquote style="box-sizing: border-box; margin: 1em 3em 1em 0px; padding-left: 1em; border-left: 4px solid rgba(0, 0, 0, 0.12); color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; font-size: 16px; background-color: #ffffff;"> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 1rem; line-height: 1.8; overflow-wrap: break-word;">这里只是一个简单的封装，不一定满足所有人的需求，可以按照自己的需求和思路进行更深层次的封装。</p> </blockquote> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"><code class="language-markup " style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: inherit; padding: 55px 20px 22px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1">&lt;template&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" 
        data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"> &lt;div class="tinymce-editor"&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="3"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="3">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="3"> &lt;editor v-model="myValue"</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="4"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="4">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="4"> :init="init"</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="5"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="5">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="5"> :disabled="disabled"</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="6"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="6">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="6"> @onClick="onClick"&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="7"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="7">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="7"> &lt;/editor&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="8"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="8">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="8"> &lt;/div&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="9"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="9">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="9">&lt;/template&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="10"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="10">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="10">&lt;script&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="11"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="11">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="11">import tinymce from 'tinymce/tinymce'</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="12"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="12">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="12">import Editor from '@tinymce/tinymce-vue'</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="13"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="13">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="13">import 'tinymce/themes/silver'</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="14"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="14">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="14">// 编辑器插件plugins</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="15"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="15">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="15">// 更多插件参考：https://www.tiny.cloud/docs/plugins/</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="16"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="16">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="16">import 'tinymce/plugins/image'// 插入上传图片插件</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset;
        vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="17"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="17">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="17">import 'tinymce/plugins/media'// 插入视频插件</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="18"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="18">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="18">import 'tinymce/plugins/table'// 插入表格插件</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="19"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="19">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="19">import 'tinymce/plugins/lists'// 列表插件</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="20"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="20">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="20">import 'tinymce/plugins/wordcount'// 字数统计插件</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="21"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="21">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="21">export default {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="22"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="22">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="22"> components: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="23"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="23">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="23"> Editor</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="24"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="24">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="24"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="25"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="25">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="25"> props: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="26"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="26">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="26"> value: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="27"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="27">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="27"> type: String,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="28"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="28">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="28"> default: ''</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="29"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="29">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="29"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="30"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="30">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="30"> // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="31"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="31">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset;
        border: unset; transition: all 0.3s ease 0s;" data-line-number="31"> // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="32"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="32">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="32"> baseUrl: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="33"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="33">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="33"> type: String,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="34"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="34">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="34"> default: ''</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="35"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="35">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="35"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="36"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="36">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="36"> disabled: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="37"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="37">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="37"> type: Boolean,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="38"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="38">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="38"> default: false</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="39"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="39">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="39"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="40"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="40">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="40"> plugins: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="41"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="41">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="41"> type: [String, Array],</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="42"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="42">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="42"> default: 'lists image media table wordcount'</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="43"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="43">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="43"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="44"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="44">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="44"> toolbar: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="45"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="45">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="45"> type: [String, Array],</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="46"> 
        <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="46">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="46"> default: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="47"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="47">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="47"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="48"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="48">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="48"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="49"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="49">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="49"> data () {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="50"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="50">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="50"> return {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="51"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="51">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="51"> init: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="52"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="52">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="52"> language_url: this.baseUrl'/tinymce/langs/zh_CN.js',</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="53"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="53">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="53"> language: 'zh_CN',</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="54"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="54">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="54"> skin_url: {this.baseUrl}/tinymce/skins/ui/oxide,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="55"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="55">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="55"> content_css: {this.baseUrl}/tinymce/skins/content/default/content.css,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="56"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="56">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="56"> // skin_url: $this.baseUrl}/tinymce/skins/ui/oxide-dark, // 暗色系</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="57"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="57">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="57"> // content_css: {this.baseUrl}/tinymce/skins/content/dark/content.css, // 暗色系</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="58"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="58">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="58"> height: 300,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="59"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="59">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="59"> plugins: this.plugins,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="60"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="60">&nbsp;</div>
        </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="60"> toolbar: this.toolbar,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="61"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="61">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="61"> branding: false,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="62"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="62">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="62"> menubar: false,</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="63"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="63">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="63"> // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="64"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="64">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="64"> // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="65"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="65">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="65"> images_upload_handler: (blobInfo, success, failure) =&gt; {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="66"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="66">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="66"> const img = 'data:image/jpeg;base64,' + blobInfo.base64()</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="67"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="67">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="67"> success(img)</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="68"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="68">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="68"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="69"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="69">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="69"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="70"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="70">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="70"> myValue: this.value</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="71"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="71">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="71"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="72"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="72">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="72"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="73"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="73">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="73"> mounted () {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="74"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="74">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="74"> tinymce.init({})</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; 
        border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="75"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="75">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="75"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="76"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="76">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="76"> methods: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="77"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="77">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="77"> // 添加相关的事件，可用的事件参照文档=&gt; https://github.com/tinymce/tinymce-vue =&gt; All available events</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="78"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="78">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="78"> // 需要什么事件可以自己增加</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="79"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="79">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="79"> onClick (e) {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="80"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="80">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="80"> this.$emit('onClick', e, tinymce)</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="81"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="81">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="81"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="82"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="82">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="82"> // 可以添加一些自己的自定义事件，如清空内容</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="83"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="83">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="83"> clear () {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="84"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="84">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="84"> this.myValue = ''</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="85"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="85">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="85"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="86"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="86">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="86"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="87"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="87">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="87"> watch: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="88"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="88">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="88"> value (newValue) {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="89"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="89">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;"
        data-line-number="89"> this.myValue = newValue</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="90"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="90">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="90"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="91"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="91">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="91"> myValue (newValue) {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="92"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="92">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="92"> this.$emit('input', newValue)</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="93"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="93">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="93"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="94"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="94">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="94"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="95"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="95">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="95">}</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="96"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="96">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="96">&lt;/script&gt;</td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"><code class="language-markup " style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: inherit; padding: 55px 20px 22px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_kVhCkoXnc17koBFkh8v2GbibOauaZplR" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="rSbUo8uLD118Z8y0JH6ta3svB80ImNyW" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"></pre> <h2 id="header-id-9" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 26px; background-color: #ffffff; margin-top: 18px !important;">封装后使用</h2> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"><code class="language-markup " style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: inherit; padding: 55px 20px 22px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <table class="hljs-ln" style="box-sizing: border-box; max-width: 100%; word-break: break-word;"> <tbody style="box-sizing: border-box;"> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="1"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="1">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="1">&lt;template&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="2"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="2">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="2"> &lt;div&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block;
        color: #dcdcdc;" data-line-number="3"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="3">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="3"> { { msg }}</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="4"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="4">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="4"> &lt;tinymce-editor ref="editor"</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="5"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="5">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="5"> v-model="msg"</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="6"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="6">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="6"> :disabled="disabled"</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="7"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="7">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="7"> @onClick="onClick"&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="8"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="8">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="8"> &lt;/tinymce-editor&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="9"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="9">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="9"> &lt;button @click="clear"&gt;清空内容&lt;/button&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="10"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="10">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="10"> &lt;button @click="disabled = true"&gt;禁用&lt;/button&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="11"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="11">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="11"> &lt;/div&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="12"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="12">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="12">&lt;/template&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="13"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="13">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="13"> </td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="14"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="14">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="14"> </td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="15"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="15">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="15">&lt;script&gt;</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="16"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="16">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="16">import TinymceEditor from './tinymce-editor/tinymce-editor'</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="17"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="17">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="17">export default {</td> </tr> <tr style="box-sizing: border-box;">
        <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="18"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="18">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="18"> components: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="19"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="19">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="19"> TinymceEditor</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="20"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="20">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="20"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="21"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="21">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="21"> data () {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="22"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="22">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="22"> return {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="23"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="23">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="23"> msg: 'Welcome to Use Tinymce Editor',</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="24"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="24">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="24"> disabled: false</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="25"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="25">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="25"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="26"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="26">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="26"> },</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="27"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="27">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="27"> methods: {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="28"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="28">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="28"> // 鼠标单击的事件</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="29"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="29">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="29"> onClick (e, editor) {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="30"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="30">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="30"> console.log('Element clicked')</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="31"> 
        <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="31">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="31"> console.log(e)</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="32"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="32">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset;
        vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="32"> console.log(editor)</td> </tr> <tr style="box-sizing: border-box;"> 
        <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; 
        text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" 
        data-line-number="33"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="33">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code"
        style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="33"> },</td> </tr>
        <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset;
        border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto;
        background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="34"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="34">&nbsp;</div>
        </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" 
        data-line-number="34"> // 清空内容</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; 
        padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; 
        overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="35"> <div class="hljs-ln-n" style="box-sizing: border-box;" 
        data-line-number="35">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="35"> clear () {</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="36"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="36">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="36"> this.$refs.editor.clear()</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="37"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="37">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="37"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="38"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="38">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="38"> }</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="39"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="39">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="39">}</td> </tr> <tr style="box-sizing: border-box;"> <td class="hljs-ln-line hljs-ln-numbers hljs" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; user-select: none; text-align: center; position: absolute; left: 20px; width: 30px; transition: all 0.3s ease 0s; overflow-x: auto; background: #1e1e1e; display: block; color: #dcdcdc;" data-line-number="40"> <div class="hljs-ln-n" style="box-sizing: border-box;" data-line-number="40">&nbsp;</div> </td> <td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: unset; vertical-align: unset; border: unset; transition: all 0.3s ease 0s;" data-line-number="40">&lt;/script&gt;</td> </tr> </tbody> </table> <pre class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"><code class="language-markup " style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 16px; color: inherit; padding: 55px 20px 22px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px; margin-top: 15px !important; margin-bottom: 15px !important;"></code></pre> <div class="hljs-control hljs-title" style="box-sizing: border-box; color: #dcdcdc; position: absolute; top: 16px; right: 20px; user-select: none; opacity: 0; transition: all 0.2s ease 0s; white-space: nowrap;"> <div class="hljs-control-btn hljs-control-toggle-linenumber" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div class="hljs-control-btn hljs-control-toggle-break-line" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> &nbsp; <div id="copy_btn_pjenmy4hX9i1GkWkBYTpoiShuQcvHd7O" class="hljs-control-btn hljs-control-copy" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;"></div> &nbsp; <div class="hljs-control-btn hljs-control-fullscreen" style="box-sizing: border-box; display: inline-block; opacity: 0.8; transition: all 0.2s ease 0s; cursor: pointer; margin-left: 15px; width: 12px; position: relative;">&nbsp;</div> </div> <pre id="nmj65tZMxl6DNi2LLXmCvVtPi45EqNZ3" class="hljs-codeblock" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; overflow: visible; margin-top: 0px; margin-bottom: 1rem; color: #212529; position: relative; tab-size: 4; background-color: #ffffff;" data-language="HTML"></pre> <h2 id="header-id-10" style="box-sizing: border-box; margin-bottom: 15px; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; line-height: 1.5; color: #32325d; font-size: 26px; background-color: #ffffff; margin-top: 18px !important;">效果图</h2> <p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; font-size: 16px; line-height: 1.8; overflow-wrap: break-word; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; background-color: #ffffff;">&nbsp;</p> <div class="fancybox-wrapper" style="box-sizing: border-box; color: #525f7f; font-family: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; font-size: 16px; background-color: #ffffff;" data-fancybox="post-images">&nbsp;</div>
        </li> </ol>`,
      disabled: false,
    };
  },
  methods: {
    // 鼠标单击的事件
    onClick(e, editor) {
      console.log("Element clicked");
      console.log(e);
      console.log(editor);
    },
    // 清空内容
    clear() {
      this.$refs.editor.clear();
    },
  },
};
</script>


<style >
.editor-content{
  margin-top: 150px;
}
</style>